<template>
	<view>
	    <!-- 公共组件-每个页面必须引入 -->
	    <public-module></public-module>
		<div class="goodsAskinfo-page">
			<u-sticky bgColor="#fff">
			    <div class="goodsAskinfo-top" v-if="questionTitle != ''">
					<div class="ask-title">{{questionTitle}}</div>
					<div class="ask-user">
						<img :src="questionUserHeader" style="width:33px;height:33px;border-radius: 50%;object-fit: cover;vertical-align:middle;"/>
						<div class="user-name">
							<span>{{questionUserName}}</span>
							<span style="padding-left:10px;">{{questionTime}}</span>
						</div>
					</div>
				</div>
			</u-sticky>	

			<div class="goodsAskinfo-list-div">
			    <div  class="con-list-div" v-if="total > 0">
					<div class="ask-item" v-for="(item,index) in list" :key="index">
						<div class="ask-user">
							<img :src="item.userHeader" style="width:33px;height:33px;border-radius: 50%;object-fit: cover;vertical-align:middle;"/>
							<div class="user-name">
								<span>{{item.userName}}</span>
							</div>
							<div class="time">{{item.createTime}}</div>
						</div>
						<div class="ask-text">
							{{item.answerContent}}
						</div>
					</div>
				</div>
		    </div>

			<div style="padding-bottom:40rpx;">
			   <u-loadmore :status="status"></u-loadmore>
			</div>

			<div class="goodsAsk-bottom">
				<div style="width:100%;margin-right:8px;">
					<u--form
						:model="sendForm"
						:errorType="errorType"
						:rules="rules"
						ref="sendForm">
							<u-form-item prop="content">
								<u-input 
									v-model="sendForm.content" 
									type="text" 
									:border="false" 
									placeholder="请输入回答内容" 
									:custom-style="{'background-color':'#F6F6F6','border-radius':'20px',}" />
							</u-form-item>
					</u--form>
				</div>
				<div style="width: 80px;">
				   <u-button text="发送" shape="circle" color="linear-gradient(90deg, #FF8D27 0%, #FF6600 100%)" :loading="btnLoading"  @click="sendAsk"></u-button>
				</div>
			</div>
           
        </div>
	</view>
</template>

<script>
import { addAnswerAPI,getAnswerListAPI } from '@/config/goods.js';
const defaultSendForm = {
    content: '',
    questionId: '',//问
};
const defaultListQuery = {
    questionId: "", 
    pageNum:1,
    pageSize:10,
}
export default {
    name: 'goodsAskInfo',
    data() {
        return {
            listQuery:JSON.parse(JSON.stringify(defaultListQuery)),
			questionId: '',
			questionTitle: '',
			questionUserHeader: '',
			questionUserName: '',
			questionTime: '',
			list: [],
			total: 0,
			status: 'loadmore',
            btnLoading: false,
            sendForm: JSON.parse(JSON.stringify(defaultSendForm)),
            errorType:'toast',
            rules: {
				content: [
					{
						required: true,
						message: '请输入您的回答内容哦。',
						trigger: ['blur']
					}
				]
			}
        }
    },
    async onLoad(options) {
        await this.$onLaunched;
        this.questionId = options.questionId;
        this.getAnswerList();
	},
	onReachBottom() {
		if(this.list.length >= this.total) {
			this.status = 'nomore';
			return ;
		}
		this.listQuery.pageNum = ++this.listQuery.pageNum;
		this.getAnswerList()
	},
    methods: {
        sendAsk(){
		   this.$refs.sendForm.validate().then(res => {
			    this.btnLoading = true;
                let data = JSON.parse(JSON.stringify(this.sendForm));
			    data.questionId = this.questionId;
			   addAnswerAPI(data).then(() => {
					uni.showToast({
						title: '您的回答已提交成功,我们会尽快审核',
						duration:1000,
						icon:'none'
					})
					setTimeout(()=>{
						this.btnLoading = false;
						uni.hideLoading();
						uni.navigateBack();
					},1000)
				}).catch(()=>{
					this.btnLoading = false;
				})
		   }).catch(errors => {
		   	
		   })
		},
	   //获取回答列表
        getAnswerList() {
            const data = JSON.parse(JSON.stringify(this.listQuery));
			data.questionId = this.questionId;
			this.status = 'loading';
			getAnswerListAPI(data).then((res) => {
				this.questionTitle = res.questionTitle;
				this.questionUserHeader = res.questionUserHeader;
				this.questionUserName = res.questionUserName;
				this.questionTime = res.questionTime;
				this.list = this.list.concat(res.list);
				this.total = res.count;
				if(this.list.length >= this.total) {
					this.status = 'nomore';
				}else{
					this.status = 'loadmore';
				}
			}).catch(()=>{
				this.status = 'loadmore';
			})
		},
    },

};
</script>

<style lang="scss">
.goodsAskinfo-page{
	background: #F8F8F8;
	min-height:100%;
	padding-bottom:80px;
	.goodsAskinfo-top{
		padding:16px;
		background: #fff;
		.ask-title{
			font-size: 16px;
			font-weight: bold;
			line-height: 20px;
			color: #000000;
		}
		.ask-user{
			display: flex;
			justify-items: flex-start;
			align-items: center;
			margin-top:10px;
			.user-name{
				font-size: 14px;
				line-height: 20px;
				color: #B99676;
				padding-left:10px;
			}
		}
	}
	.goodsAskinfo-list-div{
		padding:16px;
		.con-list-div{
			background: #fff;
			border-radius: 10px;
			padding:16px;
			.ask-item{
				margin-bottom:20px;
				.ask-user{
					display: flex;
					justify-items: flex-start;
					align-items: center;
					.user-name{
						font-size: 12px;
						line-height: 20px;
						color: #676767;
						flex:1;
						padding:0 10px;
				    }
					.time{
						font-size: 12px;
						line-height: 20px;
						color: #A7A7A7;
					}

			    }
				.ask-text{
					font-size: 14px;
					line-height: 20px;
					color: #333333;
					margin-top:10px;
					word-break:break-all;
				}

		    }
	    }
    }

	.goodsAsk-bottom{
		padding:8px;
		position: fixed;
		bottom:0;
		width:100%;
		background: #fff;
		left:0;
		box-shadow: 0px -1px 6px rgba(0, 0, 0, 0.16);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

}

</style>